<template>
  <div class="calculate">
    <div class="calc-base">
      <h1 class="think">算一算，进口一款酒需付多少钱？</h1>
      <p class="buy-progress">酒庄提货→海外仓拼箱→国际港登船→国内码头提货→入保税仓→清关→出保税仓</p>
      <div class="calc-info" v-for="(calculateInfoItem, index) of calculateInfo" :key="index">
        <label :for="calculateInfoItem.id">{{calculateInfoItem.name}}</label>
        <div v-if="!calculateInfoItem.select" class="calc-info-item"><input :id="calculateInfoItem.id" :placeholder="calculateInfoItem.placeholderInfo" v-model="calculateInfoItem.defaultInfo"></div>
        <div v-else class="calc-info-item">
          <select :id="calculateInfoItem.id" v-model="calculateInfoItem.defaultInfo">
            <option v-for="(selectItem, index2) in calculateInfoItem.select" :key="index2" :value="selectItem.val">{{selectItem.name}}</option>
          </select>
        </div>
      </div>
      <button class="calc-btn" @click="calculatePrice()">开始计算</button>
    </div>
    <div class="calc-result">
      <div class="title-name">
        <p>物流和港口</p>
        <p>单价（￥）</p>
        <p>总价（￥）</p>
      </div>
      <!--物流和港口-->
      <div class="modes-of-transport" :class="index === transportModes.length ? 'last-mode' : ''" v-for="(transportMode, index) of transportModes" :key="index">
        <div class="modes-detail-list">
          <p class="transport-main-info">{{transportMode.name}}</p>
          <p class="transport-little-info">{{transportMode.needTime}}</p>
        </div>
        <!--单价-->
        <div class="unit-price">
          <p>{{transportMode.unitPrice}}</p>
        </div>
        <!--总价-->
        <div class="total-price">
          <p>{{transportMode.totalPrice}}</p>
        </div>
      </div>
      <div class="pic-calc-line"><img src="../assets/picture/calc_1.png" width="100%"></div>
      <div class="explain">
        <h1>单价说明：</h1>
        <p>
          含：酒庄提货/ 国际运输/国内港口提货/保税仓入出库/ 国内清关/进口综合税率/交易服务
        </p>
      </div>
      <div class="pic-calc-line"><img src="../assets/picture/calc_2.png" width="100%"></div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'calculate',
    data () {
      return {
        str: true,
        calculateInfo: [
          {id: 'factory-price', name: '酒庄出厂价：', placeholderInfo: '0.00€', defaultInfo: '0.00'},
          {id: 'exchange-rate', name: '汇率：', placeholderInfo: '7.91', defaultInfo: '7.91'},
          {id: 'ratio', name: '首付比例：', placeholderInfo: '50%', defaultInfo: '0.5', select: [{name: '50%', val: 0.5}, {name: '30%', val: 0.3}, {name: '20%', val: 0.2}]},
          {id: 'wine-num', name: '进口瓶数：', placeholderInfo: '120', defaultInfo: '120', select: [{name: 60, val: 60}, {name: 120, val: 120}, {name: 180, val: 180}, {name: 240, val: 240}, {name: 300, val: 300}, {name: 600, val: 600}, {name: 1200, val: 1200}, {name: 2400, val: 2400}, {name: 3600, val: 3600}, {name: 6000, val: 6000}]}
        ],
        // 运输方式
        transportModes: [
          {name: '海运香港', needTime: '(自由贸易 50天)', mode: {target: 2, way: 1}, unitPrice: '', totalPrice: ''},
          {name: '空运香港', needTime: '(自由贸易 28天)', mode: {target: 2, way: 2}, unitPrice: '', totalPrice: ''},
          {name: '空运香港', needTime: '(自由贸易 28天/愿拼单)', mode: {target: 2, way: 2, wait: true}, unitPrice: '', totalPrice: ''},
          {name: '海运上海', needTime: '(自由贸易 65天)', mode: {target: 1, way: 1}, unitPrice: '', totalPrice: ''},
          {name: '空运上海', needTime: '(自由贸易 35天)', mode: {target: 1, way: 2}, unitPrice: '', totalPrice: ''},
          {name: '空运上海', needTime: '(自由贸易 35天/愿拼单)', mode: {target: 1, way: 2, wait: true}, unitPrice: '', totalPrice: ''},
          {name: '跨境成都', needTime: '(自由贸易 28天)', mode: {target: 3, way: 2}, unitPrice: '', totalPrice: ''},
          {name: '跨境成都', needTime: '(自由贸易 28天/愿拼单)', mode: {target: 3, way: 2, wait: true}, unitPrice: '', totalPrice: ''}
        ]
        // unitPrice: [], // 单价
        // totalPrice: [] // 总价
      }
    },
    mounted () {
      this.rateNum()
    },
    methods: {
      rateNum () {
        var _this = this
        this.$axios.get('https://www.finewest.cn/m/v2/now_rate.htm').then(function (response) {
          console.log(response)
          _this.calculateInfo[1].defaultInfo = response.data.rate
        }).catch(function (response) {
          console.log(response)
        })
      },
      calculatePrice () {
        var _this = this
        var data1 = {price: this.calculateInfo[0].defaultInfo, rate: this.calculateInfo[1].defaultInfo, firstRate: this.calculateInfo[2].defaultInfo, num: this.calculateInfo[3].defaultInfo}
        for (var i = 0; i < this.transportModes.length; i++) {
          (function (a) {
            var data = Object.assign(_this.transportModes[a].mode, data1)
            _this.$axios({
              method: 'get',
              url: 'https://www.finewest.cn/m/v2/calcRMB.htm',
              headers: {'Content-Type': 'text/plain'},
              params: data
            }).then(function (response) {
              console.log(response)
              _this.transportModes[a].unitPrice = response.data.price
              _this.transportModes[a].totalPrice = (response.data.price * data1.num).toFixed(2)
            }).catch(function (response) {
              console.log(response)
            })
          })(i)
        }
      }
    }
  }
</script>

<style scope lang="scss">
  .calculate{
    background: #eeeeee;
    padding: 10px 8px;
    .calc-base{
      background: url("../assets/picture/calc-top.png") no-repeat;
      background-size: 100% 100%;
      padding: 17px 16px 30px;
      h1.think{
        font-size: 15px;
        color: #000000;
        text-align: center;
        font-family: PingFangSC-Semi;
        font-weight: bold;
        line-height: 21px;
        margin: 0 0 10px;
      }
      p.buy-progress{
        padding: 0 14px;
        line-height: 21px;
        text-align: center;
        font-size: 12px;
        color: #000000;
        margin-bottom: 53px;
      }
      .calc-info{
        display: -webkit-flex;
        display: flex;
        align-items: center;
        margin-bottom: 33px;
        label{
          font-size: 18px;
          display: inline-block;
          width: 110px;
          flex: 0 0 auto;
          color: #000000;
        }
        .calc-info-item{
          width: 100%;
          input, select{
            width: 100%;
            border: none;
            border-bottom: 1px solid #bbbbbb;
            background: transparent;
            outline: none;
            font-size: 16px;
          }
          input::-webkit-input-placeholder { /* WebKit browsers */
             color: #bbbbbb!important;
          }
          input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
             color: #bbbbbb;
          }
          input::-moz-placeholder { /* Mozilla Firefox 19+ */
             color: #bbbbbb;
          }
          input:-ms-input-placeholder { /* Internet Explorer 10+ */
             color: #bbbbbb;
          }
        }
      }
      .calc-btn{
        font-size: 21px;
        color: #FFFFFF;
        outline: none;
        background: #e92d46;
        width: 100%;
        line-height: 44px;
        margin-top: 2px;
        border: none;
      }
    }
    .calc-result{
      margin-top: 12px;
      padding: 18px 0 0 15px;
      /*background: url("../assets/picture/calc-bottom.png") no-repeat;*/
      background: #FFFFFF;
      background-size: 100%;
      .title-name{
        column-count: 3;
        column-width: 33.33%;
        text-align: center;
        padding-bottom: 20px;
        margin-left: -15px;
        padding-left: 15px;
        border-bottom: 1px dashed #dddddd;
        p{
          font-size: 15px;
          color: #000000;
          &:first-child{
            text-align: left;
          }
        }
      }
      .modes-of-transport{
        display: -webkit-flex;
        display: flex;
        align-items: center;
        border-bottom: 1px solid #f5f5f5;
        height: 49px;
        position: relative;
        .modes-detail-list{
          align-self: flex-end;
          margin-bottom: 3px;
          width: 33.33%;
          p{
            text-align: left;
            color: #777777;
            &.transport-main-info{
              font-size: 14px;
            }
            &.transport-little-info{
              font-size: 10px;
            }
          }
        }
        .unit-price, .total-price{
          width: 33.33%;
          text-align: center;
          color: #777777;
          font-size: 14px;
        }
      }
      .pic-calc-line {
        margin-left: -15px;
        background: #eeeeee;
        font-size: 0;
        margin-top: -7px;
      }
      .explain{
        padding: 30px 0 28px 15px;
        margin-left: -15px;
        h1{
          font-size: 13px;
          color: #000000;
          margin: 0px 0 11px;
        }
        p{
          font-size: 12px;
          color: #777777;
        }
      }
    }
  }
</style>
